<template>
  <view class="container">
    <!-- 搜索框 -->
    <search />
    <!-- 所有分类 -->
    <view class="allCategory">
      <!-- 分类列表 -->
      <scroll-view scroll-y class="scrollView">
        <view class="categoryList">
          <view
            class="category"
            v-for="(item, index) in categoryList"
            :key="item.id"
          >
            <view
              class="text"
              @tap="getActiveIndex(index)"
              :class="activeIndex === index ? 'active' : ''"
              >{{ item.cat_name }}</view
            >
          </view>
        </view>
      </scroll-view>

      <!-- 分类详情 -->
      <scroll-view scroll-y class="scrollView">
        <view class="categoryDetail">
          <view
            class="floor"
            v-for="(item, index) in categoryList[activeIndex].children"
            :key="index"
          >
            <view class="title">/{{ item.cat_name }}/</view>
            <view class="catList">
              <view
                class="cat"
                v-for="item in item.children"
                :key="item.cat_id"
                @tap="jumpProductionList(item.cat_id)"
              >
                <image lazy-load :src="item.cat_icon" mode="" />
                <view class="caption">{{ item.cat_name }}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import search from "component/search.vue";
export default {
  components: {
    search,
  },
  data() {
    return {
      categoryList: [],
      activeIndex: 0,
    };
  },
  onLoad() {
    const storage = uni.getStorageSync("categoryList") || [];
    if (storage.length === 0) {
      this.getCategoryList();
    } else {
      const oldTime = uni.getStorageSync("oldTime");
      const newTime = Date.now();
      if (newTime - oldTime > 100 * 1000) {
        this.getCategoryList();
      } else {
        this.categoryList = storage;
      }
    }
  },
  methods: {
    getCategoryList() {
      uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/categories",
        success: (res) => {
          const { message } = res.data;
          this.categoryList = message;
          uni.setStorageSync("categoryList", message);
          uni.setStorageSync("oldTime", Date.now());
        },
      });
    },
    getActiveIndex(index) {
      //   console.log(index);
      this.activeIndex = index;
    },
    jumpProductionList(id) {
      console.log(id);
      uni.navigateTo({
        url: "/pages/goods_list/index?cat_id=" + id,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.allCategory {
  display: flex;
  .scrollView {
    height: calc(100vh - 100rpx);
  }
  .categoryList {
    width: 182rpx;
    background-color: #f3f3f3;
    .category {
      padding: 17rpx 0;
      .text {
        font-size: 28rpx;
        line-height: 40rpx;
        text-align: center;
        border-left: 4rpx solid transparent;
      }
    }
  }
  .categoryDetail {
    width: 568rpx;
    .floor {
      width: 568rpx;
      .title {
        margin-top: 40rpx;
        width: 568rpx;
        text-align: center;
        color: #575757;
        font-size: 26rpx;
      }
      .catList {
        box-sizing: border-box;
        padding-left: 48rpx;
        width: 568rpx;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-content: center;
        .cat {
          margin-top: 20rpx;
          margin-right: 48rpx;
          width: 120rpx;
          height: 150rpx;
          //   background-color: red;
          image {
            width: 120rpx;
            height: 120rpx;
          }
          .caption {
            color: #2e2e2e;
            font-size: 21rpx;
            text-align: center;
          }
        }
      }
    }
  }
}
.active {
  border-left: 4rpx solid #ea4350 !important;
  color: #ea4350 !important;
}
</style>